<template>
    <div class="ecurity_left">
        <!-- 上 -->
        <div class="monitor_box">
            <div class="situation_title">
                监控情况
            </div>
            <div class="monitor_all">
                <div v-for="(item, index ) in monitordata.slice(0, 3)" :key="index" class="monitor_item">
                    <div class="monitor_item_left">
                        <img :src="item.img" />
                    </div>
                    <div class="monitor_item_right">
                        <p class="p1">{{ item.floor }}</p>
                        <p class="p2">设备数量:{{ item.handclapNum }}</p>
                        <p class="p3">
                            <span class="p31">正常设备:<span class="p311">{{ item.normalNum }}</span></span>
                            <span>故障设备:<span class="p322">{{ item.equipmentNum }}</span></span>
                        </p>
                    </div>
                </div>
                <!-- <div class="monitor_item">
                    <div class="monitor_item_left">
                        <img :src="dataone ? dataone.img : ''" />
                    </div>
                    <div class="monitor_item_right">
                        <p class="p1">{{ dataone ? dataone.floor : '' }}</p>
                        <p class="p2">设备数量:{{ dataone ? dataone.handclapNum : '' }}</p>
                        <p class="p3">
                            <span class="p31">正常设备:<span class="p311">{{ dataone ? dataone.normalNum : ''
                                    }}</span></span>
                            <span>故障设备:<span class="p322">{{ dataone ? dataone.equipmentNum : '' }}</span></span>
                        </p>
                    </div>
                </div> -->
            </div>
        </div>
        <div class="prohibit_box">
            <div class="situation_title">
                门禁情况
            </div>
            <div class="prohibit_chart">
                <div class="prohibit_left" ref="prohibit_chart"></div>
                <div class="prohibit_right">
                    <div class="sexDEF">
                        <span>男生</span>
                        <span>女生</span>
                    </div>
                    <div class="DEF">
                        <div v-for="(item, index) in prohibitdata.data" :key="index">
                            <p>
                                {{ item.num }}
                            </p>
                            <p>
                                {{ item.floor }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="duty_box">
            <div class="situation_title">
                值班情况
            </div>
            <div demo-bg class="duty_chart">
                <dv-scroll-board :config="dutydata" />
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref, reactive } from 'vue';
import * as echarts from 'echarts';
import { getMonitor, getProhibit, getDuty } from '../../../api';
import './left.css'
import monitor_img from '../../../assets/images/位图.png'

const monitordata = ref([]);
const prohibitdata = reactive({});
const dutydata = reactive({
    header: ['#', '姓名', '时间', '值班内容', '联系电话'],
    data: [
        ['行1列1', '行1列2', '行1列3', '行1列4'],
        ['行2列1', '行2列2', '行2列3', '行2列4'],
        ['行3列1', '行3列2', '行3列3', '行3列4'],
        ['行4列1', '行4列2', '行4列3'],
        ['行5列1', '行5列2', '行5列3'],
        ['行6列1', '行6列2', '行6列3'],
        ['行7列1', '行7列2', '行7列3'],
        ['行8列1', '行8列2', '行8列3'],
        ['行9列1', '行9列2', '行9列3'],
        ['行10列1', '行10列2', '行10列3'],
    ],
    // index: true,
    columnWidth: [30],
    align: ['center'],
});
const prohibit_chart = ref(null);

const MonitorData = async () => {
    try {
        let res = await getMonitor();
        monitordata.value = res.data.data.result[0];
    } catch (error) {
        console.error('获取监控情况数据时出错:', error);
    }
}

const ProhibitData = async () => {
    try {
        let res = await getProhibit();

        prohibitdata.option = res.data.data.result[0].option;
        prohibitdata.data = res.data.data.result[0].tableData;

        const myprohibit_chart = echarts.init(prohibit_chart.value);
        myprohibit_chart.setOption(prohibitdata.option);
    } catch (error) {
        console.error('获取门禁情况数据时出错:', error);
    }
}

const DutyData = async () => {
    try {
        let res = await getDuty();
        // console.log('3值班:', res.data.data.result[0]);
        dutydata.data = res.data.data.result[0].map(item => [
            item.eegs_id,
            item.eegs_name,
            item.eegs_time,
            item.eegs_dutyContent,
            item.eegs_phone
        ])

    } catch (error) {
        console.error('获取值班情况数据时出错:', error);
    }
}

onMounted(() => {
    MonitorData();
    ProhibitData();
    DutyData();

    window.addEventListener('resize', () => {
        if (prohibit_chart.value) echarts.getInstanceByDom(prohibit_chart.value).resize();
    })
})
</script>

<style></style>